<!--未使用-->
<template>
  <div>
    <el-table
      :data="list"
      class="width100">
      <el-table-column
        label="关键词标题"
        prop="title">
      </el-table-column>
      <el-table-column
        label="区域"
        prop="name">
      </el-table-column>
      <el-table-column
        label="词头">
        <template slot-scope="scope">
          <!--            1 * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
          <div>{{ scope.type==3?'图文剪辑':scope.row.type==2?'口播剪辑':'AI剪辑' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="主词">
        <template slot-scope="scope">
          <div>{{ scope.row.maximumCount || '' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="长尾词">
        <template slot-scope="scope">
          <div :class="scope.row.status==1 || scope.row.status==3 ? 'status-class' : 'no-status-class'">{{ scope.row.status==3?'剪辑完成':scope.row.status==1?'剪辑中':'未剪辑' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="话题"
        prop="createTime">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
            <!--if 剪辑完成则不能进行编辑-->
          <el-button @click="handleEdit(scope.$index, scope.row)" type="text" class="m-right20">编辑</el-button>
          <el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
          <el-button @click="viewSlices(scope.$index, scope.row)" type="text">查看成片</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页按钮-->
    <el-pagination
      background
      layout="prev, pager, next,jumper, ->, total"
      :total="listCount"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-size="form.limit"
      style="text-align: center">
    </el-pagination>
  </div>
</template>

<script>
  import {scriptsDel} from "@/api/creatCenter/authoringClips";
  export default {
    name: "table-list",
    props: {
        currentPage:1,
        list:[],
        listCount:0,
        form:{}
    },
    data() {
      return {
      };
    },
    methods: {
      //点击按钮切换页面
      handleCurrentChange(currentPage) {
        this.form.page = currentPage; //每次点击分页按钮，当前页发生变化
        this.$emit('see')
        console.log('this.currentPage)', this.currentPage);
      },
      handleEdit(index, row) {
        // 需修改域名
        let url = 'http://localhost:8089/'
        if (row.type === 1) {
          url = `${url}scriptIndex?id=${row.id}&type=${row.type}`
        }
        if (row.type == 2) {
          url = `${url}diy?id=${row.id}&type=${row.type}`
        }
        if (row.type == 3) {
          url = `${url}textEdit?id=${row.id}&type=${row.type}`
        }
        window.open(url + '&from=' + location.href, "_blank")
        // window.location.href = url + '&from=' + location.href

      },
      handleDel(index, row) {
        console.log(index, row);
        scriptsDel({
          id: row.id  //1剪辑比例
        })
          .then((data) => {
            this.$message.success('删除成功！');
            console.log('data==========',data)
            this.$emit('done');

          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },
      // 查看成片
      viewSlices(index, row){
        // id: row.id  //1剪辑比例
        console.log("row.id ========", row.id )
        this.$router.push({path:'/creatCenter/piecemeal',query:{id: row.id }})
      }
    },
    watch: {

    }
  };
</script>

<style scoped lang="less">
  /*<!-- 分页样式 -->*/
  /deep/ .el-table + .el-pagination {
    margin: 15px;
  }
  .no-status-class,.status-class{
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    cursor: default;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 7px;
    height: 28px;
    border-radius: 2px;
    line-height: 1;
  }
  .no-status-class{
    color: rgb(51, 54, 57);
    background-color: #eee;
  }
  .status-class{
    color: #18a058;
    background-color: rgba(20, 142, 77, 0.12);
  }
</style>
